Разработка приложения Sushi App. Часть 1

➡️Ссылка на репозиторий с кодом этого урока (ветка main)

Таблица маршрутизации

Используем таблицу маршрутизации для более удобной навигации

Файл main.dart

import 'package:flutter/material.dart';  
import 'package:sushi_app/screens/cart_screen.dart';  
import 'package:sushi_app/screens/detail_roll_screen.dart';  
import 'package:sushi_app/screens/main_screen.dart';  
  
  
void main() => runApp(const RollApp());  
  
/// Виджет RollApp - это точка входа в приложение по заказу роллов  
/// Он создает MaterialApp, который является основой для  
/// всех остальных виджетов.  
  
class RollApp extends StatelessWidget {  
  const RollApp({super.key});  
  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      title: "Суши Shop", // Название приложения  
      theme: ThemeData(  
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue), // Цвета  
      ),  
      debugShowCheckedModeBanner: false,
      initialRoute: '/', // Экран который видно самым первым  
      routes: {  
        '/': (context) => MainScreen(), // Главный экран  
      },  
    );  
  }  
}

                  

В папку screens добавим новый файл main_screen.dart

• Создадим Stateful виджет MainScreen
• Добавим в AppBar кнопку для перехода в корзину. На этой кнопке отображается количество добавленных товаров с помощью виджета Badge
• Нарисуем список карточек в виде сетки с двумя колонками с помощью виджета GridView

Файл main_screen.dart

import 'package:flutter/material.dart';

class MainScreen extends StatefulWidget {
  MainScreen({super.key});

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sushi Shop'),
        actions: <Widget>[
          IconButton(
            icon: Badge.count(count: 99, child: const Icon(Icons.shopping_cart)),
            tooltip: 'Корзина',
            onPressed: () {
              // TODO: Добавить переход в корзину
            },
          ),
        ],
      ),

      // GridView это виджет, который позволяет создавать список в виде сетки
      body: GridView.builder(
        padding: const EdgeInsets.symmetric(horizontal: 12),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, // Указываем количество колонок
          crossAxisSpacing: 8.0, // Отступ между колонками
          mainAxisSpacing: 8.0, // Отступ между строками
          childAspectRatio: 0.85, // Соотношение сторон карточки
        ),
        itemCount: 10, // Количество элементов в списке
        // itemBuilder рисует каждый элемент по порядку. У него есть index
        itemBuilder: (context, index) {
          return Card(
            child: ListTile(
              title: Text('Карточка $index'),
            )
          );
        },
      ),
    );
  }
}